async function getBanner() {
    const res = await axios({
        url: '/banner',
        method: 'GET'
    })
    return res
}

async function getpersonlize() {
    const res = await axios({
        url: '/personalized?limit=8',
        method: 'GET'
    })
    return res
}

async function getnewalbums() {
    const res = await axios({
        url: '/album/newest',
        method: 'GET'
    })
    return res
}

async function getIndexList(id) {
    const res = await axios({
        url: `/playlist/detail?id=${id}`,
        method: 'GET'
    })
    return res
}

async function getArtist() {
    const res = await axios({
        url: '/artist/list',
        method: 'GET'
    })
    return res
}

var change = new Object
var bannertimer

async function banner() {
    let n = 0
    const res = await getBanner()
    const data = res.data.banners
    function action(n) {
        $('.ban-img>a>img')[0].src = data[n].imageUrl
        $('#banner-back').css('background-image', `url(${data[n].imageUrl}?imageView&blur=40x20)`)
        $('.pg').removeClass('active')
        $('.pg').eq(n).toggleClass('active')
    }
    bannertimer = setInterval(function () {
        n += 1
        n = n % 10
        action(n)
    }, 3000)
    change.next = function () {
        clearInterval(bannertimer)
        n += 1
        n = n % 10
        action(n)
        bannertimer = setInterval(function () {
            n += 1
            n = n % 10
            action(n)
        }, 3000)
    }
    change.pre = function () {
        clearInterval(bannertimer)
        n = (n + 9) % 10
        action(n)
        bannertimer = setInterval(function () {
            n += 1
            n = n % 10
            action(n)
        }, 3000)
    }
    change.action = function (x) {
        clearInterval(bannertimer)
        action(x)
        n = x
        bannertimer = setInterval(function () {
            n += 1
            n = n % 10
            action(n)
        }, 3000)
    }
}
banner()

async function personalalbum() {
    const res = await getpersonlize()
    const data = res.data.result
    $('.hot-body')[0].innerHTML = ''
    data.forEach(element => {
        $('.hot-body')[0].innerHTML += `<li>
        <div class="cover">
            <img src="${element.picUrl}?param=140y140"
                alt="">
            <a href="javascript:;"></a>
            <div>
                <a href="javascript:;"></a>
                <span class="icon-headset"></span>
                <span class="nb">${parseInt(element.playCount / 10000)}万</span>
            </div>
        </div>
        <p class="dec">
            <a href="javascript:;">${element.name}</a>
        </p>
    </li>`
    });
}
personalalbum()

async function newalbum() {
    const res = await getnewalbums()
    const data = res.data.albums
    $('.new-body>div')[0].innerHTML = ''
    for (let i = 0; i < 4; i++) {
        $('.new-body>div')[0].innerHTML += `
        <ul class="disk" style="left:${645 * (i - 1)}px;"></ul>`
        for (let index = (i * 5) % 10; index < data.length - ((i + 1) * 5) % 10 - 2; index++) {
            $('.disk')[i].innerHTML += `<li>
        <div class="cover2">
            <img src="${data[index].picUrl}?param=100y100" alt="">
            <a class="msk" href="javascript:;"></a>
            <a class="fr" href="javascript:;"></a>
        </div>
        <p class="f-thide"><a href="javascript:;">${data[index].name}</a></p>
        <p class="f-thide"><a href="javascript:;">${data[index].artist.name}</a></p>
    </li>`
        }

    }
}
newalbum()


var changeAlbum = {
    flag: true,
    nextAlbum() {
        if (this.flag) {
            this.flag = false
            $('.disk').css('transition', 'all 1s')
            for (let i = 0; i < 4; i++) {
                $('.disk')[i].style.left = (parseInt($('.disk')[i].style.left) + 645) + 'px'
            }
            setTimeout(function () {
                if ($('.disk')[0].style.left == '0px') {
                    $('.disk').css('transition', 'none 1s')
                    for (let i = 0; i < 4; i++) {
                        $('.disk')[i].style.left = (i - 2) * 645 + 'px'
                    }
                }
                changeAlbum.flag = true
            }, 1000)

        }
    },
    preAlbum() {
        if (this.flag) {
            this.flag = false
            $('.disk').css('transition', 'all 1s')
            for (let i = 0; i < 4; i++) {
                $('.disk')[i].style.left = (parseInt($('.disk')[i].style.left) - 645) + 'px'
            }
            setTimeout(function () {
                if ($('.disk')[3].style.left == '0px') {
                    $('.disk').css('transition', 'none 1s')
                    for (let i = 0; i < 4; i++) {
                        $('.disk')[i].style.left = (i - 1) * 645 + 'px'
                    }
                }
                changeAlbum.flag = true
            }, 1000)

        }
    }
}

async function indexList() {
    const res1 = await getIndexList(19723756)
    $('.blk:first>div>.cover3>img')[0].src = `${res1.data.playlist.coverImgUrl}?param=100y100`
    $('.blk:first>div>.tit h3')[0].innerHTML = res1.data.playlist.name
    $('.blk:first ol')[0].innerHTML = ''
    for (let i = 0; i < 10; i++) {
        $('.blk:first ol')[0].innerHTML += `<li class="song"">
        <span>${i + 1}</span>
        <a href=" javascript:;" class="f-thide">${res1.data.playlist.tracks[i].name}</a>
        <div class="oper">
            <a onclick="play_video(${res1.data.playlist.tracks[i].id})" href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </li>`
    }

    const res2 = await getIndexList(3779629)
    $('.blk:eq(1)>div>.cover3>img')[0].src = `${res2.data.playlist.coverImgUrl}?param=100y100`
    $('.blk:eq(1)>div>.tit h3')[0].innerHTML = res2.data.playlist.name
    $('.blk:eq(1) ol')[0].innerHTML = ''
    for (let i = 0; i < 10; i++) {
        $('.blk:eq(1) ol')[0].innerHTML += `<li class="song"">
        <span>${i + 1}</span>
        <a href=" javascript:;" class="f-thide">${res2.data.playlist.tracks[i].name}</a>
        <div class="oper">
            <a onclick="play_video(${res2.data.playlist.tracks[i].id})" href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </li>`

    }

    const res3 = await getIndexList(2884035)
    $('.blk:last>div>.cover3>img')[0].src = `${res3.data.playlist.coverImgUrl}?param=100y100`
    $('.blk:last>div>.tit h3')[0].innerHTML = res3.data.playlist.name
    $('.blk:last ol')[0].innerHTML = ''
    for (let i = 0; i < 10; i++) {
        $('.blk:last ol')[0].innerHTML += `<li class="song"">
        <span>${i + 1}</span>
        <a href=" javascript:;" class="f-thide">${res3.data.playlist.tracks[i].name}</a>
        <div class="oper">
            <a onclick="play_video(${res3.data.playlist.tracks[i].id})" href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </li>`
    }
}
indexList()



function newMore() {
    $('.header_bottom_nav_fx>li:last-child>a')[0].click()
}